<template>
  <div class="page luckdraw-mobile-edit">
    <p>首次绑定手机号，可获得{{coinForBindPhone}}个金币</p>
    <div class="group">
      <m-input title="手机号" placeholder="请输入手机号" type="number" v-model="phone"></m-input>
    </div>
    <div class="multi-input">
      <div class="input">
        <m-input title="验证码" placeholder="请输入验证码" v-model="imageCode" isLast></m-input>
      </div>
      <div class="handler">
        <img :src="codePic" mode="widthFix" v-if="codePic"/>
      </div>
    </div>
    <div class="link" @click="getCodePic">看不清？</div>
    <div class="btn-section">
      <div class="btn-inner">
        <m-button text="下一步" @onClick="onNextStepClick"></m-button>
      </div>
    </div>
    <m-toast v-model="toastContent"></m-toast>
  </div>
</template>

<script>
import MInput from 'comp/m-input'
import MButton from 'comp/m-button'
import MToast from 'comp/m-toast'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
    MInput,
    MButton,
    MToast
  },
  data () {
    return {
      phone: '',
      codePic: '',
      imageCode: '',
      toastContent: '',
      coinForBindPhone: ''
    }
  },
  mounted () {
    this.resetData()
    this.queryConfig()
    this.getCodePic()
  },
  methods: {
    /**
     * 获取绑定手机号获取的金币数
     */
    async queryConfig () {
      const ret = await this.$store.dispatch('queryConfig')
      if (ret) {
        this.coinForBindPhone = ret.goldBingPhone
      }
    },
    /**
     * 获取图形验证码 图片
     */
    async getCodePic () {
      const ret = await this.$store.dispatch('getImageCode', {
        key: 'bindphone'
      })
      this.codePic = ret
    },
    /**
     * 下一步
     */
    async onNextStepClick () {
      if (!this.phone) {
        this.toastContent = '请输入手机号'
        return false
      }
      if (!this.imageCode) {
        this.toastContent = '请输入验证码'
        return false
      }
      // 校验图形验证码
      const openId = await this.getOpenId()
      await this.$store.dispatch('submitImageCode', {
        playerid: openId,
        phone: this.phone,
        code: this.imageCode
      })
      wx.navigateTo({
        url: `/pages/mobile-edit-step2/main?phone=${this.phone}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.luckdraw-mobile-edit {
  p {
    font-size: 30rpx;
    padding: 40rpx 30rpx 20rpx;
  }
  .group {
    padding-top: 20rpx;
  }
  .multi-input {
    display: flex;
    align-items: center;
    background-color: #fff;
    .input {
      flex: 1;
    }
    .handler {
      width: 200rpx;
      img {
        display: block;
        width: 200rpx;
      }
      a {
        font-size: 32rpx;
        color: #488ff0;
        text-align: center;
      }
    }
  }
  .link {
    font-size: 28rpx;
    color: #488ff0;
    padding: 20rpx 30rpx;
    text-align: right;
  }
  .btn-section {
    width: 100%;
    margin-top: 30rpx;
    .btn-inner {
      padding: 20rpx 20rpx;
    }
  }
}
</style>
